<template>
  <view class="kd-order-detail" v-if="detailInfo.oid">
    <view class="order-number">
      <view class="left">
        订单编号：
        <text class="number">{{ detailInfo.order_no }}</text>
      </view>
      <view class="right-status">{{
        orderStatusMapText[detailInfo.goods_status]
      }}</view>
    </view>

    <view class="order-info-wrap">
      <view class="info-row">上门时间：{{ detailInfo.door_str }}</view>
      <view class="info-row">物品类型：{{ detailInfo.goods_type }}</view>
      <view class="info-row">物品重量：{{ detailInfo.goods_weight }}公斤</view>
      <view class="info-row"
        >寄件费用：
        <text class="val"
          >{{ detailInfo.total_price }}元
          {{ payText[detailInfo.pay_status] }}</text
        >
      </view>
    </view>

    <view class="people-info-wrap">
      <view class="head-text">寄件人</view>
      <view class="info-wrap">
        <view class="left">
          <view class="avatar-wrap">
            <image src="/static/image/test.jpg"></image>
          </view>
          <view class="other-info">
            <view class="name">{{ detailInfo.a1name }}</view>
            <view class="address">{{
              detailInfo.a1areaaddress +
              detailInfo.a1name_address +
              detailInfo.a1doornumber
            }}</view>
          </view>
        </view>
        <view class="right-btn" v-if="parseInt(detailInfo.goods_status) !== 0">
          <uni-icons
            type="chatbubble-filled"
            size="22"
            color="#b1b1b1"
            @click="handleToChat"
          ></uni-icons>

          <uni-icons
            type="phone-filled"
            size="22"
            color="#b1b1b1"
            class="phone"
            @click="handleCall(detailInfo.a1mobile)"
          ></uni-icons>
        </view>
      </view>
    </view>

    <view class="people-info-wrap">
      <view class="head-text">收件人</view>
      <view class="info-wrap">
        <view class="left">
          <view class="other-info">
            <view class="name">{{ detailInfo.a2name }}</view>
            <view class="address sj-addres">{{
              detailInfo.a2areaaddress +
              detailInfo.a2name_address +
              detailInfo.a2doornumber
            }}</view>
          </view>
        </view>
        <view class="right-btn" v-if="parseInt(detailInfo.goods_status) !== 0">
          <uni-icons
            type="phone-filled"
            size="18"
            color="#BFBFC1"
            @click="handleCall(detailInfo.a2mobile)"
          ></uni-icons>
        </view>
      </view>
    </view>

    <van-cell is-link @click="handleToLineRoutePlanning">
      <view slot="title" class="function-row">
        <view class="icon">
          <image src="/static/image/route-planning.png"></image>
        </view>

        <view class="name">取件线路规划</view>
      </view>
    </van-cell>

    <van-cell
      custom-class="margin-bottom-cell"
      is-link
      @click="handleToLineDeliveryRoutePlanning"
    >
      <view slot="title" class="function-row">
        <view class="icon">
          <image src="/static/image/route-planning.png"></image>
        </view>

        <view class="name">配送线路规划</view>
      </view>
    </van-cell>

    <van-cell
      is-link
      :value="express_no"
      @click="handleScanning"
      v-if="detailInfo.goods_status !== 0"
    >
      <view slot="title" class="function-row">
        <view class="icon">
          <uni-icons type="scan" size="20" class="phone"></uni-icons>
        </view>

        <view class="name">扫描快递单</view>
      </view>
    </van-cell>

    <view class="option-button" v-if="detailInfo.goods_status === 1">
      <van-button
        custom-class="receiving-order-btn"
        type="info"
        @click="handleSurePickUp"
        >确认取件
      </van-button>
    </view>

    <view class="option-button" v-if="detailInfo.goods_status === 2">
      <van-button
        custom-class="receiving-order-btn"
        type="info"
        @click="handleSureComplete"
        >完成配送
      </van-button>
    </view>

    <van-toast id="van-toast" />
    <van-dialog id="van-dialog" />
  </view>
</template>

<script>
import Toast from "wxcomponents/vant/toast/toast";
import Dialog from "@/wxcomponents/vant/dialog/dialog";
const app = getApp();
export default {
  data() {
    return {
      latitude: "",
      longitude: "",
      oid: "",
      detailInfo: {},
      orderStatusMapText: {
        1: "待取件",
        2: "配送中",
        3: "已完成",
      },
      payText: {
        0: "待支付",
        1: "已支付",
      },
      express_img: "",
      express_no: "",
      source: "",
    };
  },
  methods: {
    handleSureComplete() {
      const that = this;
      Dialog.confirm({
        message: "确认完成配送吗？",
        zIndex: 9999,
      })
        .then(() => {
          const { detailInfo } = that;
          const { oid } = detailInfo;

          app
            .request(
              {
                oid,
                express_no: that.express_no,
              },
              "/api/logistics/order/finish"
            )
            .then((res) => {
              const { code, msg } = res;

              if (code === 1) {
                Toast(msg);
                this.handleGetDetailInfo();

                const eventChannel = that.getOpenerEventChannel();
                eventChannel.emit("refreshList");
              } else {
                Toast(msg);
              }
            });
        })
        .catch(() => {
          // on cancel
        });
    },
    handleSurePickUp() {
      const { detailInfo } = this;
      const { oid } = detailInfo;
      const that = this;

      Dialog.confirm({
        message: "确认取件吗？",
        zIndex: 9999,
      })
        .then((res) => {
          Toast.loading({
            message: "加载中",
            mask: false,
            duration: 0,
            zIndex: 9999999,
            forbidClick: true,
          });
          app
            .request(
              {
                oid,
              },
              "/api/logistics/order/picked"
            )
            .then((res) => {
              const { code, data, msg } = res;

              if (code === 1) {
                Toast("操作成功");
                that.handleGetDetailInfo();

                const eventChannel = that.getOpenerEventChannel();
                eventChannel.emit("refreshList");
              } else {
                Toast(msg);
              }
            });
        })
        .catch(() => {
          // on cancel
        });
    },
    handleToChat() {
      uni.navigateTo({
        url: "/pages/myFeature/chat/index",
      });
    },
    handleCall(mobile) {
      uni.makePhoneCall({
        phoneNumber: mobile, //仅
      });
    },
    handleToLineDeliveryRoutePlanning() {
      const that = this;
      const { a2location } = this.detailInfo;
      let arr = a2location.split(",");

      uni.getLocation({
        success(res) {
          const { latitude, longitude } = res;

          that.latitude = latitude;
          that.longitude = longitude;

          let data = {
            slatitude: latitude,
            slongitude: longitude,
            elatitude: arr[0],
            elongitude: arr[1],
          };

          let str = app.getQueryStringByObject(data);

          uni.navigateTo({
            url: "/pages/kdOrder/locationTracking" + str,
          });
        },
        fail(res) {},
      });
    },
    handleToLineRoutePlanning() {
      const that = this;
      const { a1location } = this.detailInfo;
      let arr = a1location.split(",");

      uni.getLocation({
        success(res) {
          const { latitude, longitude } = res;

          that.latitude = latitude;
          that.longitude = longitude;

          let data = {
            slatitude: latitude,
            slongitude: longitude,
            elatitude: arr[0],
            elongitude: arr[1],
          };

          let str = app.getQueryStringByObject(data);

          uni.navigateTo({
            url: "/pages/kdOrder/locationTracking" + str,
          });
        },
        fail(res) {},
      });
    },
    handleScanning() {
      uni.scanCode({
        success(data) {
          const { result } = data;

          Toast(result);
        },
      });
    },
    handleGetDetailInfo() {
      const { oid } = this;

      Toast.loading({
        message: "加载中",
        mask: false,
        duration: 0,
        zIndex: 9999999,
        forbidClick: true,
      });

      if (this.source === "orderGrabbingHall") {
        app
          .request(
            {
              oid,
            },
            "/api/logistics/order/user_detail"
          )
          .then((res) => {
            console.log(res);
            const { code, data, msg } = res;

            if (code === 1) {
              this.detailInfo = {
                ...data,
                goods_status: parseInt(data.goods_status),
              };

              Toast(data.goods_status);
            } else {
              Toast(msg);
            }
          })
          .finally(() => {
            Toast.clear();
          });
      } else {
        app
          .request(
            {
              oid,
            },
            "/api/logistics/order/express_detail"
          )
          .then((res) => {
            console.log(res);
            const { code, data, msg } = res;

            if (code === 1) {
              this.detailInfo = {
                ...data,
                goods_status: parseInt(data.goods_status),
              };
            } else {
              console.log(11111,msg);
              Toast(msg);
            }
          })
          .finally(() => {
            console.log(22222);
            Toast.clear();
          });
      }
    },
  },
  onLoad(res) {
    const { oid, source } = res;

    if (source && source === "orderGrabbingHall") {
      this.source = "orderGrabbingHall";
    }
    this.oid = oid;
    this.handleGetDetailInfo();
  },
};
</script>

<style lang="less">
.kd-order-detail {
  width: 100%;
  min-height: 100vh;
  background-color: #f2f2f2;

  .order-number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 73rpx;
    border-bottom: 1rpx solid #f0f0f8;
    background-color: #fff;
    padding: 0 20rpx;
    box-sizing: border-box;
    font-size: 26rpx;

    .left {
      .number {
        color: #1e79d2;
      }
    }

    .right-status {
      font-size: 26rpx;
      color: #1e79d2;
    }
  }

  .order-info-wrap {
    width: 100%;
    background-color: #fff;
    padding: 20rpx 20rpx 1rpx;
    box-sizing: border-box;
    font-size: 26rpx;
    margin-bottom: 15rpx;

    .info-row {
      margin-bottom: 20rpx;
    }
  }

  .people-info-wrap {
    width: 100%;
    background-color: #fff;
    margin-bottom: 15rpx;

    .head-text {
      display: flex;
      align-items: center;
      width: 100%;
      height: 58rpx;
      font-size: 26rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      border-bottom: 1rpx solid #f0f0f8;
    }

    .info-wrap {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18rpx 20rpx;
      box-sizing: border-box;

      .left {
        display: flex;
        align-items: center;

        .avatar-wrap {
          width: 68rpx;
          height: 68rpx;
          margin-right: 16rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .other-info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .name {
            font-size: 28rpx;
          }

          .address {
            font-size: 26rpx;
            color: #aaa;
            max-width: 458rpx;
          }

          .sj-addres {
            max-width: 588rpx;
          }
        }
      }

      .right-btn {
        .phone {
          margin-left: 66rpx;
        }
      }
    }
  }

  .margin-bottom-cell {
    margin-bottom: 16rpx;
  }

  .function-row {
    display: flex;
    align-items: center;

    .icon {
      width: 38rpx;
      height: 38rpx;
      margin-right: 20rpx;
      margin-bottom: 10rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .naem {
      margin-left: 20rpx;
      font-size: 26rpx;
    }
  }

  .option-button {
    width: 100%;
    padding: 0 20rpx;
    box-sizing: border-box;
    margin-top: 16rpx;

    .receiving-order-btn {
      width: 100%;
      height: 82rpx;
    }
  }
}
</style>
